<template>
  <div class="main">
    <myForm ref="myForm" :dataForm="dataForm" :formItem="formItem" @cancel="cancel" @handleSubmit="handleSubmit" />
  </div>
</template>

<script>
import myForm from './components/myForm.vue';
import { addDamInfoRecord, getRiverArea } from '@/api/record.js';

export default {
  components: { myForm },
  props: {
    dataForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formItem: [
        {
          key: 'stationName',
          label: '电站名称',
          propsType: 'input',
          require: true,
          maxLength: 32
        },
        {
          key: 'watershedId',
          label: '所属流域',
          propsType: 'multipleSelect',
          propsOptions: []
        },
        {
          key: 'provinceId',
          label: '所属行政区',
          propsType: 'selects', //多个选择
          propsOptions: [],
          require: true
        },
        {
          key: 'stationType',
          label: '类型',
          propsType: 'select',
          propsOptions: [
            {
              key: '1',
              name: '常规水电站',
              value: 1
            },
            {
              key: '2',
              name: '抽水蓄能电站',
              value: 2
            },
            {
              key: '3',
              name: '其他',
              value: 3
            }
          ],
          require: true
        },
        {
          key: 'longitude',
          label: '经度',
          propsType: 'input'
        },
        {
          key: 'latitude',
          label: '纬度',
          propsType: 'input'
        },
        {
          key: 'damHeight',
          label: '坝高',
          hasSuffix: true,
          suffix: 'm',
          propsType: 'input',
          require: true
        },
        {
          key: 'damLength',
          label: '坝长',
          hasSuffix: true,
          suffix: 'm',
          propsType: 'input'
        },
        {
          key: 'damAspectRatio',
          label: '长高比',
          propsType: 'input'
        },
        {
          key: 'upstreamSlopeRatio',
          label: '上游坡比',
          propsType: 'input'
        },
        {
          key: 'downstreamSlopeRatio',
          label: '下游坡比',
          propsType: 'input'
        },
        {
          key: 'damVolume',
          label: '体积',
          hasSuffix: true,
          suffix: '万m³',
          propsType: 'input'
        },
        {
          key: 'installedCapacity',
          label: '装机容量',
          hasSuffix: true,
          suffix: 'MW',
          propsType: 'input'
        },
        {
          key: 'waterLevel',
          label: '水位',
          hasSuffix: true,
          suffix: 'm',
          propsType: 'input'
        },
        {
          key: 'storageCapacity',
          label: '库容',
          hasSuffix: true,
          suffix: '亿m³',
          propsType: 'input'
        },
        {
          key: 'floodDischarge',
          label: '泄洪量',
          hasSuffix: true,
          suffix: 'm³/s',
          propsType: 'input'
        },
        {
          key: 'seismicIntensity',
          label: '地震烈度',
          propsType: 'input'
        },
        {
          key: 'startYear',
          label: '开工年份',
          hasSuffix: true,
          suffix: '年',
          propsType: 'input'
        },
        {
          key: 'builtYear',
          label: '建成年份',
          hasSuffix: true,
          suffix: '年',
          propsType: 'input'
        },
        {
          key: 'designUnit',
          label: '设计单位',
          propsType: 'input'
        },
        {
          key: 'builtPurpose',
          label: '建成目的',
          propsType: 'input'
        },
        {
          key: 'stationImg',
          label: '图片',
          propsType: 'upload',
          limit: 5,
          type: 12
        }
      ]
    };
  },
  mounted() {
    this.getRiverArea(2);
    this.getRiverArea(1);
  },
  methods: {
    getRiverArea(type) {
      getRiverArea(type).then(res => {
        this.formItem[type].propsOptions = res.data;
      });
    },
    handleSubmit(values) {
      values.damId = this.dataForm.id;
      values.panelType = 1;
      if (!values.stationName) {
        this.$message.info('请输入电站名称');
        return;
      }
      if (!values.provinceId) {
        this.$message.info('请至少选择一个所属行政区');
        return;
      }
      if (!values.stationType) {
        this.$message.info('请选择类型');
        return;
      }

      if (!values.damHeight) {
        this.$message.info('请输入坝高');
        return;
      }
      addDamInfoRecord(values).then(res => {
        if (res.code == 0) {
          this.$message.success('新增成功');
          this.$emit('cancel', true);
        }
      });
    },
    cancel() {
      this.$emit('cancel');
    },
    resetFields() {
      this.$refs.myForm.resetFields();
    }
  }
};
</script>

<style scoped lang="scss"></style>
